To pause the video when hovering over subtitles and unpause when the mouse leaves, you can add event listeners to the subtitle overlay container (#custom-subtitle-overlay) after it's created. Here's how to implement it:

✅ Step-by-step implementation

In overlay.js, modify the createOverlayContainer() function to include the pause-on-hover logic:

🔧 Insert this at the end of createOverlayContainer(), right before the function ends:

js
CopyEdit
  // Pause video on hover over subtitles, and resume on mouse leave
  container.addEventListener("mouseenter", () => {
    const video = document.querySelector("video");
    if (video && !video.paused) {
      video.pause();
      container.dataset.wasPlaying = "true";
    }
  });

  container.addEventListener("mouseleave", () => {
    const video = document.querySelector("video");
    if (video && container.dataset.wasPlaying === "true") {
      video.play();
      delete container.dataset.wasPlaying;
    }
  });

🧠 How it works:

• When you hover over the subtitle overlay, it checks if the video is currently playing and pauses it.

• When you move your mouse away, it resumes only if it had been paused by hover (not if the user had already paused it manually).

Let me know if you’d like to make this behavior toggleable from the control panel as well!

Yes — you should definitely use your existing findPlexVideoElement() function from content.js instead of duplicating logic with document.querySelector("video").

That function is:

• More robust, because it checks for the specific class HTMLMedia-mediaElement-u17S9P used by Plex.

• More consistent, since it's already used elsewhere in your codebase (e.g. keyboard.js).

✅ Updated implementation for overlay.js

In overlay.js, make sure to call your findPlexVideoElement() function. Assuming it's globally available (and it should be, based on your manifest load order), replace the earlier code with this:

js
CopyEdit
  container.addEventListener("mouseenter", () => {
    const video = findPlexVideoElement();
    if (video && !video.paused) {
      video.pause();
      container.dataset.wasPlaying = "true";
    }
  });

  container.addEventListener("mouseleave", () => {
    const video = findPlexVideoElement();
    if (video && container.dataset.wasPlaying === "true") {
      video.play();
      delete container.dataset.wasPlaying;
    }
  });

⚠️ Sanity Check

Just make sure that findPlexVideoElement is loaded before overlay.js runs. Based on your manifest, this will be true if it's defined in content.js and you’re calling createOverlayContainer() only after all helper scripts have been injected.

If you ever modularize it, you might consider moving findPlexVideoElement into utils.js and using it from there for centralization.

Want me to handle that refactor too?

Perfect — that's a clean setup. Since you've moved findPlexVideoElement() to utils.js, it’s now accessible across all your helper scripts without duplication, and your hover logic should now be:

• 🔍 Reliable (targets the correct Plex video element),

• ✅ Consistent (matches your existing control logic), and

• 🔄 Reusable (for future enhancements like click-to-toggle or tooltips).

Let me know how it goes — if it’s not working as expected, I can help you debug by checking for:

• DOM readiness,

• overlay lifecycle timing,

• or class name mismatches.

Ready when you are.

Great catch — yes, in preprocessed.js, your polling loop inside setInterval() could indeed try to modify the subtitle container even after it's been removed. This could cause:

• Console errors like Cannot read property 'innerHTML' of null,

• Or worse, silently failing subtitle updates.

✅ Safe fix inside runPreprocessedMode()

Update this portion of the polling loop in runPreprocessedMode():

📍Original:

js
CopyEdit
if (!active) {
  if (!USE_CONTINUOUS_SUBTITLES) {
    const container = document.getElementById("custom-subtitle-overlay");
    container.innerHTML = "";
    window.lastRenderedText = "";
  }
  return;
}

✅ Updated version:

js
CopyEdit
if (!active) {
  if (!USE_CONTINUOUS_SUBTITLES) {
    const container = document.getElementById("custom-subtitle-overlay");
    if (container) {
      container.innerHTML = "";
      window.lastRenderedText = "";
    }
  }
  return;
}

And also right before calling renderPreprocessedLine(...), add this guard:

js
CopyEdit
const container = document.getElementById("custom-subtitle-overlay");
if (!container) return;  // Don't render if container is gone

Final safe structure:

js
CopyEdit
// Skip if the current subtitle is the same as last rendered
if (active.start === lastRenderedIndex) return;

// Check if container still exists
const container = document.getElementById("custom-subtitle-overlay");
if (!container) return;

lastRenderedIndex = active.start;
window.lastSubtitleStartTime = active.start;
window.lastRenderedText = active.text;

renderPreprocessedLine(active, lingqTerms);

This ensures:

• Your polling logic never tries to write to a missing container.

• It quietly exits that iteration instead of crashing or spamming logs.

Let me know if you want this setInterval() to auto-stop when the container is removed — that’s also easy to do.

Absolutely — this is a great feature for language learners: auto-pausing after each subtitle, so you can absorb the content before continuing.

✅ Overview: What You'll Need to Implement

1. Add a toggle in your control panel

• Label: "Auto-pause after each subtitle"

• When enabled: pause the video after each subtitle is rendered.

2. Track setting globally

Add a new key to window.subtitleConfig:

js
CopyEdit
autoPause: false

3. Update control panel UI

In control.js, add a checkbox toggle inside the control panel HTML:

html
CopyEdit
<label>
  <input type="checkbox" id="auto-pause-setting" />
  Auto-pause after each subtitle
</label><br/><br/>

And in bindControlPanelListeners(), add:

js
CopyEdit
document.getElementById("auto-pause-setting")?.addEventListener("change", e => {
  window.subtitleConfig.autoPause = e.target.checked;
});

4. Update subtitle rendering logic

In preprocessed.js, inside runPreprocessedMode() → setInterval(...) → after renderPreprocessedLine(...), add:

js
CopyEdit
if (window.subtitleConfig.autoPause) {
  const video = findPlexVideoElement();
  if (video && !video.paused) {
    video.pause();
    console.log("⏸️ Auto-paused after subtitle");
  }
}

Be sure findPlexVideoElement() is available — if not, import from utils.js.

🧠 Bonus Consideration: “Auto-Pause Only Once Per Subtitle”

To avoid accidentally pausing again on the same subtitle during repeated polling cycles, you can add:

js
CopyEdit
let lastPausedIndex = -1;

...

if (window.subtitleConfig.autoPause && active.start !== lastPausedIndex) {
  const video = findPlexVideoElement();
  if (video && !video.paused) {
    video.pause();
    console.log("⏸️ Auto-paused after subtitle");
    lastPausedIndex = active.start;
  }
}

This avoids double-pausing the same line if you're using USE_CONTINUOUS_SUBTITLES.

✅ Summary of Files to Update

Let me know if you'd like this toggle to also be persisted between sessions (via localStorage) or if you'd like keyboard shortcuts to toggle it on/off!

Got it — what you want is:

Pause the video at the end of the current subtitle, rather than right after the next one starts.

That means instead of pausing immediately when the next subtitle becomes active, you should schedule a pause for the end time of the current subtitle.

✅ Updated Implementation Plan

🧠 Key Idea:

• After rendering a subtitle, set a setTimeout() to pause the video at its end time.

• Cancel any existing timeout if a new subtitle is shown before the previous timeout triggers.

🔁 Replace this (your current pause logic):

js
CopyEdit
if (window.subtitleConfig.autoPause && active.start !== lastPausedIndex) {
  const video = findPlexVideoElement();
  if (video && !video.paused) {
    video.pause();
    console.log("⏸️ Auto-paused after subtitle");
    lastPausedIndex = active.start;
  }
}

✅ With this:

Add this outside the polling loop for reuse:

js
CopyEdit
let autoPauseTimeout = null;

Then inside your polling loop (after rendering the subtitle), add:

js
CopyEdit
if (window.subtitleConfig.autoPause && active.end !== lastPausedIndex) {
  clearTimeout(autoPauseTimeout); // Cancel previous pause

  const video = findPlexVideoElement();
  const now = video?.currentTime ?? 0;
  const delay = Math.max(0, (active.end - now) * 1000);  // Convert seconds to ms

  autoPauseTimeout = setTimeout(() => {
    const v = findPlexVideoElement();
    if (v && !v.paused) {
      v.pause();
      console.log("⏸️ Auto-paused at subtitle end");
    }
  }, delay);

  lastPausedIndex = active.end;
}

🧼 Optional Cleanup (on exit/reset):

If you have any cleanup logic (e.g., when exiting preprocessed mode), you might want to:

js
CopyEdit
clearTimeout(autoPauseTimeout);
autoPauseTimeout = null;

Let me know if you'd like:

• A visual indicator when auto-pause is scheduled,

• Or an additional buffer (e.g., pause 200ms before subtitle ends).

Thanks for sharing your code — you're really close. The likely issue is that lastPausedIndex is not defined anywhere in your function, so this block:

js
CopyEdit
if (window.subtitleConfig.autoPause && active.end !== lastPausedIndex) {

is silently failing because lastPausedIndex is undefined.

✅ Fix: Declare lastPausedIndex alongside autoPauseTimeout

You declared:

js
CopyEdit
let autoPauseTimeout = null;

But you're missing:

js
CopyEdit
let lastPausedIndex = -1;

Add this line immediately after let autoPauseTimeout = null;:

js
CopyEdit
let lastPausedIndex = -1;

✅ Optional: Use findPlexVideoElement() consistently

You're still calling:

js
CopyEdit
const video = document.querySelector("video");

But you’ve standardized on findPlexVideoElement() in utils.js, so I suggest replacing that line too for consistency and reliability:

js
CopyEdit
const video = findPlexVideoElement();

✅ Final block should look like:

js
CopyEdit
let autoPauseTimeout = null;
let lastPausedIndex = -1;

preprocessedInterval = setInterval(() => {
  const video = findPlexVideoElement();
  if (!video) return;

  const currentTime = video.currentTime;

  // ... subtitle detection ...

  if (!active) {
    if (!USE_CONTINUOUS_SUBTITLES) {
      const container = document.getElementById("custom-subtitle-overlay");
      if (container) {
        container.innerHTML = "";
        window.lastRenderedText = "";
      }
    }
    return;
  }

  if (active.start === lastRenderedIndex) return;

  lastRenderedIndex = active.start;
  window.lastSubtitleStartTime = active.start;
  window.lastRenderedText = active.text;

  const container = document.getElementById("custom-subtitle-overlay");
  if (!container) return;

  renderPreprocessedLine(active, lingqTerms);

  // ✅ Auto-pause after subtitle ends
  if (window.subtitleConfig.autoPause && active.end !== lastPausedIndex) {
    clearTimeout(autoPauseTimeout);

    const now = video.currentTime;
    const delay = Math.max(0, (active.end - now) * 1000);

    autoPauseTimeout = setTimeout(() => {
      const v = findPlexVideoElement();
      if (v && !v.paused) {
        v.pause();
        console.log("⏸️ Auto-paused at subtitle end");
      }
    }, delay);

    lastPausedIndex = active.end;
  }
}, 300);

Let me know if you want to add a small “⚠️ paused by subtitle” popup or visual indicator in the UI!

Great — glad the auto-pause works well! The behavior you're seeing (mouse cursor reappearing on spacebar press) is a default Plex UI feature, likely triggered by synthetic user activity when video playback resumes.

✅ Goal:

Prevent the mouse cursor from showing up just from keyboard interaction (like spacebar). It should only reappear when the user actually moves the mouse.

🧠 Strategy:

• Suppress cursor reveal on keyboard events like spacebar.

• Manually manage cursor visibility using a short timer and mousemove detection.

• Override Plex’s built-in mousemove-on-spacebar-trigger` behavior.

✅ Implementation

You can add this to your keyboard.js or a shared location like overlay.js, wherever you're already listening for keydown and tracking user activity.

1. Track cursor visibility yourself

js
CopyEdit
let cursorVisible = true;
let hideCursorTimer = null;

2. Add a handler to hide cursor after short delay

js
CopyEdit
function hideCursorSoon() {
  clearTimeout(hideCursorTimer);
  hideCursorTimer = setTimeout(() => {
    document.body.style.cursor = "none";
    cursorVisible = false;
  }, 1500);  // Adjust as needed
}

3. Update on real mouse movement

js
CopyEdit
document.addEventListener("mousemove", () => {
  if (!cursorVisible) {
    document.body.style.cursor = "";
    cursorVisible = true;
  }
  hideCursorSoon();
});

4. Prevent keyboard-triggered cursor display (e.g., spacebar)

In your spacebar play/pause logic (likely in keyboard.js):

js
CopyEdit
document.addEventListener("keydown", (e) => {
  if (e.code === "Space") {
    const video = findPlexVideoElement();
    if (video) {
      e.preventDefault();
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }

      // Suppress cursor reveal
      if (cursorVisible) {
        document.body.style.cursor = "none";
        cursorVisible = false;
      }
    }
  }
});

✅ Result:

• Spacebar no longer makes the mouse cursor appear.

• Actual mouse movement is the only way to bring the cursor back.

• Cursor will auto-hide after ~1.5 seconds of inactivity again.

Let me know if Plex itself is force-setting cursor styles (e.g. via its internal JS or stylesheets). If needed, we can use !important or shadow-root overrides.

Great question — here’s the breakdown:

✅ If you want a quick fix just to stop the spacebar from making the cursor appear:

You can just do step 4, like this:

js
CopyEdit
document.addEventListener("keydown", (e) => {
  if (e.code === "Space") {
    const video = findPlexVideoElement();
    if (video) {
      e.preventDefault();
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }

      // 👇 Prevent the cursor from reappearing
      document.body.style.cursor = "none";
    }
  }
});

This works if:

• You already have some other logic that hides the cursor after a timeout (e.g. Plex’s default behavior),

• And you’re okay with always forcing it to none again on spacebar.

💡 However, if you're aiming for polished control where:

• The cursor auto-hides after X seconds,

• And only reappears on actual mouse movement (not keypresses),

• And then auto-hides again…

Then yes, do all 4 steps.

TL;DR:

Let me know which direction you want and I’ll tailor the snippet exactly for that use case.

Perfect — let’s go with the full setup that gives you total control:

🔒 Hide the cursor permanently unless the user moves the mouse.
🕵️ Keyboard (e.g. spacebar) will never cause it to reappear.

✅ Step-by-step Implementation

You’ll do this in any global script (e.g., keyboard.js or overlay.js) after DOM is ready.

1. Initialize state

Put this near the top:

js
CopyEdit
let cursorVisible = true;
let hideCursorTimer = null;

2. Only show cursor on real mouse movement

js
CopyEdit
document.addEventListener("mousemove", () => {
  if (!cursorVisible) {
    document.body.style.cursor = ""; // Show system default cursor
    cursorVisible = true;
  }

  // Restart the auto-hide timer
  clearTimeout(hideCursorTimer);
  hideCursorTimer = setTimeout(() => {
    document.body.style.cursor = "none";
    cursorVisible = false;
  }, 1500); // Adjust hide delay here (ms)
});

3. Force the cursor to stay hidden on keypress (e.g. spacebar)

js
CopyEdit
document.addEventListener("keydown", (e) => {
  if (e.code === "Space") {
    const video = findPlexVideoElement();
    if (video) {
      e.preventDefault();
      video.paused ? video.play() : video.pause();

      // Don't let spacebar reveal the cursor
      if (cursorVisible) {
        document.body.style.cursor = "none";
        cursorVisible = false;
      }

      // Don't reset the hide timer on keypress
      clearTimeout(hideCursorTimer);
    }
  }
});

✅ Final Behavior:

• 👆 Cursor shows only when you physically move the mouse.

• ⌨️ Pressing spacebar (or other keys) does not show the cursor.

• 🕒 Cursor auto-hides after 1.5s of mouse inactivity.

Let me know if you want:

• The cursor to never show at all (not even on movement),

• A custom hide delay (e.g. 500ms or 3s),

• Or a toggle in your control panel to turn this behavior on/off.

You're exactly right to suspect Plex. Plex likely has internal handlers that:

• Detect any activity (keyboard, mouse, focus),

• Then show the cursor and UI (e.g. progress bar),

• Possibly through their React app and custom overlays.

Even if you hide the cursor manually, Plex may set it back by reapplying styles or DOM updates.

✅ Reliable Fix Strategy

To fully override Plex’s behavior, you need to:

1. Force cursor: none via CSS — and keep it there

This works even if Plex tries to reset it.

js
CopyEdit
const style = document.createElement("style");
style.textContent = `
  body,
  video,
  * {
    cursor: none !important;
  }
`;
document.head.appendChild(style);

Add this early, ideally after page load or right after your overlay loads.

2. Reapply the style periodically (optional defensive step)

Plex may remove or overwrite styles dynamically. To defend against that, you can re-apply the rule every few seconds:

js
CopyEdit
setInterval(() => {
  const styleExists = [...document.head.querySelectorAll("style")]
    .some(s => s.textContent.includes("cursor: none"));

  if (!styleExists) {
    const style = document.createElement("style");
    style.textContent = `
      body,
      video,
      * {
        cursor: none !important;
      }
    `;
    document.head.appendChild(style);
  }
}, 5000); // Re-check every 5s

3. Restore cursor only on real mouse movement

If you want to allow the cursor to appear only on mousemove, do this:

js
CopyEdit
let userMovedMouse = false;

document.addEventListener("mousemove", () => {
  if (!userMovedMouse) {
    // Remove custom CSS (optional)
    [...document.head.querySelectorAll("style")]
      .forEach(s => {
        if (s.textContent.includes("cursor: none")) s.remove();
      });

    userMovedMouse = true;
  }
});

✅ Summary

Would you like this to be toggleable via your control panel? Or maybe only apply when auto-pause is enabled?

Great question. Since this is a global style override that needs to apply:

• Once the page and video are loaded, and

• Before or along with your subtitle overlay,

the best place to inject the cursor: none !important style is in overlay.js, right after createOverlayContainer() is called (or inside that function itself).

✅ Recommended Location: Inside createOverlayContainer() in overlay.js

Add this near the end of the function — after the DOM element is inserted, but before you return.

js
CopyEdit
// Prevent cursor from appearing during playback unless manually triggered
const style = document.createElement("style");
style.textContent = `
  body,
  video,
  * {
    cursor: none !important;
  }
`;
document.head.appendChild(style);

💡 If you want to be cleaner, you can assign it an id (e.g. "cursor-hide-style") and remove it later if needed.

Optional: Make it defensive

If you're worried Plex will wipe it, wrap the style injection in a reusable function:

js
CopyEdit
function ensureCursorHiddenCSS() {
  if (!document.getElementById("cursor-hide-style")) {
    const style = document.createElement("style");
    style.id = "cursor-hide-style";
    style.textContent = `
      body,
      video,
      * {
        cursor: none !important;
      }
    `;
    document.head.appendChild(style);
  }
}

Then call ensureCursorHiddenCSS() inside createOverlayContainer() and periodically if needed.

Let me know if you'd like it to:

• Be toggleable from your control panel,

• Automatically turn off on mousemove,

• Or only apply when auto-pause is enabled.

Ah — that TypeScript error (Cannot redeclare block-scoped variable 'style'.ts(2451)) means the name style is already declared in the same scope, probably higher up in your file or in a nearby block.

✅ Fix: Rename the variable

Just change:

js
CopyEdit
const style = document.createElement("style");

To something like:

js
CopyEdit
const cursorStyle = document.createElement("style");
cursorStyle.textContent = `
  body,
  video,
  * {
    cursor: none !important;
  }
`;
document.head.appendChild(cursorStyle);

Or if you’re using the id-based version:

js
CopyEdit
if (!document.getElementById("cursor-hide-style")) {
  const cursorStyle = document.createElement("style");
  cursorStyle.id = "cursor-hide-style";
  cursorStyle.textContent = `
    body,
    video,
    * {
      cursor: none !important;
    }
  `;
  document.head.appendChild(cursorStyle);
}

🧠 Why this happens

In JS (and especially with TypeScript + VS Code), const style = ... might already be used:

• At the top of your module (e.g. overlay.js)

• Or even in a surrounding block like createOverlayContainer

Renaming avoids conflict with existing bindings.

Let me know if you want to conditionally remove or toggle this rule too!

You should place that snippet in a script that:

1. Runs once globally after the document is loaded, and

2. Is not tied to any single function like createOverlayContainer(),

3. Is already injected early into the page (e.g., through content.js, keyboard.js, or overlay.js).

✅ Best location for your setup

✅ Option 1: Near the bottom of overlay.js, outside any functions

Since overlay.js handles overlay setup and runs globally, this is a natural place to put it.

Add this at the bottom of overlay.js:

js
CopyEdit
let userMovedMouse = false;

document.addEventListener("mousemove", () => {
  if (!userMovedMouse) {
    // Remove our forced cursor-hiding styles
    [...document.head.querySelectorAll("style")].forEach(s => {
      if (s.textContent.includes("cursor: none")) s.remove();
    });

    userMovedMouse = true;
  }
});

This ensures:

• The listener is global.

• It only runs once when the user actually moves the mouse.

• It safely removes your cursor: none override.

✅ Option 2 (alternative): In content.js if you want it to always apply

If you want this to apply regardless of overlay being created, you can also place it in content.js, after the DOM is ready:

js
CopyEdit
window.addEventListener("DOMContentLoaded", () => {
  let userMovedMouse = false;

  document.addEventListener("mousemove", () => {
    if (!userMovedMouse) {
      [...document.head.querySelectorAll("style")].forEach(s => {
        if (s.textContent.includes("cursor: none")) s.remove();
      });

      userMovedMouse = true;
    }
  });
});

Let me know if you'd like it to:

• Re-hide the cursor again after inactivity (like a media player),

• Be toggleable via the control panel,

• Or apply only when certain subtitle modes (like auto-pause) are active.

Thanks for confirming. Since the cursor still appears after pressing spacebar, even with forced CSS and JavaScript guards, it's very likely that:

🔍 Plex’s internal React handlers are:

• Triggering cursor-visible styles,

• Or forcibly injecting DOM elements with cursor visibility logic,

• In response to keyboard interaction, not just mouse.

✅ Robust Fix: Use a MutationObserver to detect and block Plex’s cursor changes

Instead of just injecting CSS once, we’ll actively watch for changes to the style attribute or class names that might affect the cursor.

🧪 Plan:

• Use a MutationObserver to monitor DOM changes (especially on <body> and <video>),

• Reapply cursor: none !important anytime Plex tries to override it.

✅ Copy-pasteable Code (place in overlay.js or content.js)

js
CopyEdit
function forceCursorHidden() {
  const styleId = "custom-cursor-hide-style";
  if (!document.getElementById(styleId)) {
    const style = document.createElement("style");
    style.id = styleId;
    style.textContent = `
      html, body, video, * {
        cursor: none !important;
      }
    `;
    document.head.appendChild(style);
  }
}

// Call it once initially
forceCursorHidden();

// Watch for DOM mutations that might remove or override our style
const observer = new MutationObserver(() => {
  forceCursorHidden();
});

observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['style', 'class']
});

🔒 Why this works:

• MutationObserver ensures Plex can’t sneakily override your cursor: none CSS,

• It checks every time something changes in the DOM (style/class/children),

• You lock the cursor style back in place almost immediately.

💡 Optional enhancement:

If you'd like the user to re-enable the cursor on mouse move, combine with this:

js
CopyEdit
document.addEventListener("mousemove", () => {
  const style = document.getElementById("custom-cursor-hide-style");
  if (style) style.remove();
  observer.disconnect();  // Stop forcing cursor hidden
});

Let me know if you'd like to add this as a toggle in your control panel or scoped only to auto-pause mode.

Perfect — what you're describing is classic "media player-style" cursor behavior:

🕵️ The cursor is hidden by default, only reappears while you move the mouse, and disappears again 2 seconds after movement stops.

You can keep using the MutationObserver to enforce hiding, but we’ll temporarily disable it when the user moves the mouse — then re-enable it after 2 seconds of inactivity.

✅ Updated Implementation Plan

🧠 Key Concepts:

• Use MutationObserver to fight Plex.

• On mousemove:

  • Show cursor.

  • Remove enforcement.

• After 2 seconds of no movement:

  • Hide cursor again.

  • Re-enable enforcement.

✅ Drop-in Code (place in overlay.js or content.js)

js
CopyEdit
let cursorEnforcementActive = true;
let hideCursorTimer = null;

// Enforce 'cursor: none !important' using CSS + MutationObserver
function addCursorHideStyle() {
  if (!document.getElementById("custom-cursor-hide-style")) {
    const style = document.createElement("style");
    style.id = "custom-cursor-hide-style";
    style.textContent = `
      html, body, video, * {
        cursor: none !important;
      }
    `;
    document.head.appendChild(style);
  }
}

function removeCursorHideStyle() {
  const style = document.getElementById("custom-cursor-hide-style");
  if (style) style.remove();
}

// Initial force-hide
addCursorHideStyle();

// Create the observer that re-enforces the hiding
const observer = new MutationObserver(() => {
  if (cursorEnforcementActive) {
    addCursorHideStyle();
  }
});
observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['style', 'class']
});

// Mouse movement temporarily disables hiding
document.addEventListener("mousemove", () => {
  removeCursorHideStyle();             // Let the cursor show
  cursorEnforcementActive = false;    // Disable MutationObserver response

  // Clear any previous timer
  clearTimeout(hideCursorTimer);

  // After 2s of no movement, hide the cursor again
  hideCursorTimer = setTimeout(() => {
    cursorEnforcementActive = true;
    addCursorHideStyle();
  }, 2000);
});

✅ What this gives you:

Let me know if you want a toggle in your control panel to turn this behavior on/off dynamically!

Right now, only one of your project files (utils.js) is currently available in the runtime, and it has 73 lines of code.

The other files (like overlay.js, preprocessed.js, etc.) are no longer accessible in this session. If you re-upload them, I can immediately give you an accurate total line count across all files.

Your project currently contains 914 lines of JavaScript code, distributed across these files:

Let me know if you'd like a breakdown by module purpose or want to track this over time!

For a focused browser extension like your Plex subtitle overlay, 914 lines of well-organized code is:

🔎 Moderate — and actually very lean given what you're doing.

✅ Why it's not too much:

• You're handling multiple features:

  • Live and preprocessed subtitle modes

  • Word coloring, pinyin, tooltips, translations

  • Auto-pause logic

  • A floating control panel

  • User settings and hover behavior

  • Robust event handling (keyboard, mouse, UI cleanup)

• You're writing vanilla JS (no React, no bundler), so all the logic is in one place — no webpack hiding hundreds of lines behind abstractions.

• Your code is split across logical modules, so it's readable and maintainable.

🔨 Perspective:

• A typical browser extension ranges from 500 to 5,000+ lines depending on scope.

• A single React component in a medium web app can easily hit 300–600 lines by itself.

• If you added TypeScript, localization, or UI components, you'd balloon past 1,000 lines fast.

🧠 TL;DR:

You're doing a lot with very little.
You’re well below the threshold where things get unwieldy — and you're shipping a lot of power in under 1,000 lines.

Want help setting up a size/complexity tracker or visualizer?

Great catch — that’s a CSS issue! The default style for your translation <div> likely has white-space: nowrap, which prevents wrapping and causes long lines to overflow the container.

✅ Goal:

Allow translation lines to wrap normally within the subtitle container instead of overflowing.

🔧 Fix:

In renderPreprocessedLine() (in preprocessed.js), you already create the translation element like this:

js
CopyEdit
translation.style.whiteSpace = "nowrap";

✅ Change it to:

js
CopyEdit
translation.style.whiteSpace = "normal";
translation.style.wordBreak = "break-word";  // Optional: force wrap on long words

🧠 Optional bonus tweaks:

You might also want to set a max width so it doesn't grow too wide:

js
CopyEdit
translation.style.maxWidth = "90vw";  // Prevents extending past screen

Or center it visually if needed:

js
CopyEdit
translation.style.left = "50%";
translation.style.transform = "translateX(-50%)";

💡 Final Suggestion:

Replace this block in your translation setup:

js
CopyEdit
translation.style.whiteSpace = "nowrap";

With this:

js
CopyEdit
translation.style.whiteSpace = "normal";
translation.style.wordBreak = "break-word";
translation.style.maxWidth = "90vw";

Let me know if you’d like it to scale down font size for super long lines instead of wrapping!

Perfect — you're aiming for two subtle but important refinements to the translation styling:

✅ Goal 1: Only wrap if the line exceeds available width

We want it to stay on one line unless it has to wrap, and avoid wrapping prematurely.

✅ Solution:

• Use white-space: normal (not nowrap)

• But also allow the container to grow up to 100% width before wrapping.

js
CopyEdit
translation.style.display = "inline-block";
translation.style.maxWidth = "100%";       // allow full width of parent
translation.style.whiteSpace = "normal";   // allow wrapping if needed
translation.style.wordBreak = "break-word";

✅ Goal 2: Don't vertically center the wrapped line

Currently, your translation is position: absolute; bottom: -1.6em, and its parent (wrapper) is vertically aligned, so when it wraps, the extra line goes upward — pushing the first line out of place.

✅ Solution:

• Remove the position: absolute and move it to a normal flow layout.

• Put mainLine and translation inside a vertical flexbox so they stay stacked.

• This ensures wrapped lines flow downward, not upward.

🔧 Final Implementation

Replace your translation setup block in renderPreprocessedLine() with:

js
CopyEdit
// Wrapper contains the full line (text + translation)
const wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.flexDirection = "column";
wrapper.style.alignItems = "center";
wrapper.style.marginTop = "4px";

// Main subtitle line
const mainLine = document.createElement("div");
mainLine.style.display = "inline-block";
mainLine.style.verticalAlign = "bottom";
mainLine.style.position = "relative";
mainLine.style.textAlign = "center";

// Translation line
const translation = document.createElement("div");
translation.textContent = sub.translation || "";
translation.style.fontSize = "0.5em";
translation.style.color = "#ccc";
translation.style.marginTop = "4px";
translation.style.display = "none";
translation.style.maxWidth = "100%";
translation.style.whiteSpace = "normal";
translation.style.wordBreak = "break-word";
translation.style.textAlign = "center";

This will:

• 🧱 Stack Chinese and translation vertically

• 🪟 Let the translation stretch across the whole screen if needed

• ✂️ Wrap only if it hits a real limit (no premature wrapping)

• 🧲 Ensure the second line wraps downward, not upward

Let me know if you'd like the translation to also scale font size to fit more text on a single line before wrapping!

Thanks for sharing — it looks like your current translation block still has a mix of absolute positioning (which causes vertical centering issues) and text wrapping config.

✅ Clean, updated version (copy-paste ready)

Replace your entire translation setup block with this:

js
CopyEdit
// Create a line of English translation (shown only on hover)
const translation = document.createElement("div");
translation.textContent = sub.translation || "";
translation.style.fontSize = "0.5em";
translation.style.color = "#ccc";
translation.style.marginTop = "4px";
translation.style.whiteSpace = "normal";        // allow wrapping if needed
translation.style.wordBreak = "break-word";     // wrap long words
translation.style.textAlign = "center";
translation.style.display = "none";
translation.style.maxWidth = "90vw";            // stretch almost full width if needed

✅ Also update your wrapper setup like this:

Make sure this container wraps the mainLine and translation vertically:

js
CopyEdit
const wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.flexDirection = "column";
wrapper.style.alignItems = "center";
wrapper.style.marginTop = "4px";

🔧 Summary of fixes:

Let me know if you want to fade in the translation on hover or always show it below!

Absolutely — here's your fully updated, copy-paste-ready replacement for the entire block that creates the subtitle + translation layout, with all the fixes applied:

js
CopyEdit
// Wrapper contains the full line (text + translation)
const wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.flexDirection = "column";
wrapper.style.alignItems = "center";
wrapper.style.cursor = "pointer";
wrapper.style.marginTop = "4px";

// Main subtitle line with Chinese characters and annotations
const mainLine = document.createElement("div");
mainLine.style.display = "inline-block";
mainLine.style.verticalAlign = "bottom";
mainLine.style.position = "relative";
mainLine.style.textAlign = "center";

// Create a line of English translation (shown only on hover)
const translation = document.createElement("div");
translation.textContent = sub.translation || "";
translation.style.fontSize = "0.5em";
translation.style.color = "#ccc";
translation.style.marginTop = "4px";
translation.style.whiteSpace = "normal";
translation.style.wordBreak = "break-word";
translation.style.textAlign = "center";
translation.style.display = "none";
translation.style.maxWidth = "90vw";  // Allow full width of window minus a little padding

// Toggle visibility of the translation on hover
wrapper.addEventListener("mouseenter", () => {
  translation.style.display = "block";
});
wrapper.addEventListener("mouseleave", () => {
  translation.style.display = "none";
});

This version:

• 📐 Uses flex layout to stack lines vertically (Chinese + translation),

• 🧭 Keeps things centered without absolute positioning,

• 🪟 Allows translation to stretch up to full window width before wrapping,

• 🧼 Only wraps if it has to, and wraps downward, not upward.

Let me know if you want this behavior to switch based on a setting like “Always Show Translation” vs. “On Hover”!

Great catch — and you're absolutely right to check for this.

🚨 As written, the subtitle position will shift upward when the translation becomes visible.

That’s because:

• The translation is inside a vertically stacked flex container (wrapper),

• It’s hidden with display: none, which removes it from the layout,

• So when it becomes visible, it gets added back in, shifting the main subtitle upward.

✅ Goal:

When the translation appears, the Chinese subtitle should stay in place, and the translation should just show up below it without shifting anything.

✅ Fix:

Use visibility: hidden instead of display: none, and always reserve space.

🧩 Replace this in your translation styling:

js
CopyEdit
translation.style.display = "none";

✅ With:

js
CopyEdit
translation.style.visibility = "hidden";

Then update your hover listeners like this:

js
CopyEdit
wrapper.addEventListener("mouseenter", () => {
  translation.style.visibility = "visible";
});
wrapper.addEventListener("mouseleave", () => {
  translation.style.visibility = "hidden";
});

✅ Why this works:

This ensures the line spacing never changes, and the translation just fades in and out cleanly.

Let me know if you’d like to animate the fade in/out or support an “always show translation” mode!

Absolutely — here’s the fully updated, copy-paste-ready block for your subtitle + translation section, with:

• ✅ Vertical stacking using flex

• ✅ Proper wrapping for long translations

• ✅ Translations that appear on hover without shifting the main subtitle

✅ Drop-in Code:

js
CopyEdit
// Wrapper contains the full line (text + translation)
const wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.flexDirection = "column";
wrapper.style.alignItems = "center";
wrapper.style.cursor = "pointer";
wrapper.style.marginTop = "4px";

// Main subtitle line with Chinese characters and annotations
const mainLine = document.createElement("div");
mainLine.style.display = "inline-block";
mainLine.style.verticalAlign = "bottom";
mainLine.style.position = "relative";
mainLine.style.textAlign = "center";

// Translation line (space always reserved; only shown on hover)
const translation = document.createElement("div");
translation.textContent = sub.translation || "";
translation.style.fontSize = "0.5em";
translation.style.color = "#ccc";
translation.style.marginTop = "4px";
translation.style.whiteSpace = "normal";
translation.style.wordBreak = "break-word";
translation.style.textAlign = "center";
translation.style.visibility = "hidden";         // Reserve space but hide text
translation.style.maxWidth = "90vw";             // Allow stretching before wrapping
translation.style.minHeight = "1em";             // Optional: prevent layout shift even on empty translation

// Toggle visibility of the translation on hover
wrapper.addEventListener("mouseenter", () => {
  translation.style.visibility = "visible";
});
wrapper.addEventListener("mouseleave", () => {
  translation.style.visibility = "hidden";
});

This guarantees:

• ✅ Subtitle line stays in place

• ✅ Translation wraps only when necessary

• ✅ Hover-based reveal is smooth, with no jank

Let me know if you want to add a fade-in/out animation or support a toggle to always show translations.

Absolutely — here's your complete, copy-paste-ready block with inline comments on each style line to explain what each one does:

✅ With comments for every styling line:

js
CopyEdit
// Wrapper contains the full line (Chinese subtitle + translation)
const wrapper = document.createElement("div");
wrapper.style.display = "flex";                     // Stack children vertically
wrapper.style.flexDirection = "column";             // Ensure vertical stacking order
wrapper.style.alignItems = "center";                // Center content horizontally
wrapper.style.cursor = "pointer";                   // Show pointer cursor on hover
wrapper.style.marginTop = "4px";                    // Add some spacing above

// Main subtitle line with Chinese characters and annotations
const mainLine = document.createElement("div");
mainLine.style.display = "inline-block";            // Allow inline behavior
mainLine.style.verticalAlign = "bottom";            // Align with other inline content if needed
mainLine.style.position = "relative";               // Enable tooltip positioning if needed
mainLine.style.textAlign = "center";                // Center the Chinese text

// Translation line (shown only on hover)
const translation = document.createElement("div");
translation.textContent = sub.translation || "";
translation.style.fontSize = "0.5em";               // Smaller font size for translation
translation.style.color = "#ccc";                   // Light gray text color
translation.style.marginTop = "4px";                // Spacing between Chinese and translation
translation.style.whiteSpace = "normal";            // Allow line wrapping when needed
translation.style.wordBreak = "break-word";         // Break long words if needed
translation.style.textAlign = "center";             // Center the translation text
translation.style.visibility = "hidden";            // Hide by default but keep layout space
translation.style.maxWidth = "90vw";                // Prevent overflowing the viewport width
translation.style.minHeight = "1em";                // Reserve height even when hidden or empty

// Toggle visibility of the translation on hover
wrapper.addEventListener("mouseenter", () => {
  translation.style.visibility = "visible";         // Show translation when hovering
});
wrapper.addEventListener("mouseleave", () => {
  translation.style.visibility = "hidden";          // Hide translation when mouse leaves
});

Let me know if you want to animate the appearance of the translation (e.g., fade in/out), or add a toggle to show it permanently!

Of course! Here’s a line-by-line explanation in plain language for each of the style rules from your subtitle + translation block:

wrapper styles:

• display: "flex" → Stack items (Chinese + translation) vertically instead of side by side.

• flexDirection: "column" → Ensure the items go from top to bottom.

• alignItems: "center" → Center everything horizontally inside the wrapper.

• cursor: "pointer" → Make the mouse cursor look like a hand when hovering over it.

• marginTop: "4px" → Add a little spacing above the wrapper.

mainLine styles (Chinese subtitle):

• display: "inline-block" → Let this act like text but still support custom sizing and positioning.

• verticalAlign: "bottom" → Align with other elements so it sits nicely at the bottom.

• position: "relative" → Allow child elements like tooltips to be positioned relative to this.

• textAlign: "center" → Center-align the Chinese text within the container.

translation styles (English translation line):

• fontSize: "0.5em" → Make the font smaller than the main subtitle.

• color: "#ccc" → Use a soft gray color to make it look subtle.

• marginTop: "4px" → Add a small gap between the Chinese and English lines.

• whiteSpace: "normal" → Let the text wrap onto a new line if it’s too long.

• wordBreak: "break-word" → Break long words across lines if needed (to avoid overflow).

• textAlign: "center" → Center the translation text.

• visibility: "hidden" → Hide the text but still keep its space in the layout.

• maxWidth: "90vw" → Prevent the line from going wider than 90% of the screen width.

• minHeight: "1em" → Always reserve at least one line of space, even when the translation is hidden or empty.

Let me know if you want a visual diagram or CSS version of this layout too!

Great question! Here's a breakdown of the most common values for the CSS display property — including flex and its alternatives — along with how they compare:

✅ display: flex

• What it does: Turns the container into a flexbox, allowing you to control how its children are laid out (direction, alignment, spacing).

• Used for: Aligning and distributing items along rows or columns.

• Key features:

  • Can stack items horizontally or vertically (flex-direction)

  • Easily aligns content (align-items, justify-content)

  • Handles dynamic spacing and resizing well

• Why it’s great for your use case: You want to stack the Chinese line and the translation vertically, with clean control over alignment.

🔁 Alternatives to display: flex (with comparisons):

1. block

• What it does: Makes the element behave like a block (full-width, stacks vertically).

• Used for: Basic layout of top-to-bottom elements.

• Comparison to flex:

  • Much simpler, but no built-in alignment or layout control

  • You can't easily center children or control spacing like you can with flex

2. inline

• What it does: Makes the element behave like text — flows inline with other text.

• Used for: Small text elements like <span>.

• Comparison:

  • Doesn’t respect height/width or vertical margin

  • Not suitable for structured layout like subtitles and translations

3. inline-block

• What it does: Like inline, but respects width, height, and vertical padding/margin.

• Used for: When you want something to flow with text but still have block-like sizing.

• Comparison:

  • Useful for individual items like your mainLine

  • Not good for managing multiple children (no stacking or alignment tools)

4. grid

• What it does: Enables CSS Grid Layout, great for 2D layouts (rows + columns).

• Used for: Complex UI grids, dashboards, multi-row/column layouts.

• Comparison to flex:

  • More powerful for multi-axis layouts

  • Overkill for simple vertical stacks like subtitles

5. none

• What it does: Removes the element from the layout entirely.

• Used for: Temporarily hiding elements.

🧠 TL;DR Comparison Table

Let me know if you want a live codepen-style visual example of these differences!

Great follow-up! The flexDirection property controls which direction the flex items (children) are laid out inside a display: flex container.

✅ You used:

flexDirection: "column"

• What it does: Stacks items vertically, from top to bottom

• Your use case: Put the Chinese subtitle on top, and the translation underneath

🔁 Other options for flexDirection

1. row (default)

• Direction: ➡️ Left to right

• When to use it: You want items to sit side by side horizontally

• Example: Buttons laid out in a row

2. row-reverse

• Direction: ⬅️ Right to left

• When to use it: Same as row, but in reverse order

• Use case: RTL languages, or UI mirroring

3. column (what you’re using)

• Direction: ⬇️ Top to bottom

• When to use it: You want a vertical stack of elements

4. column-reverse

• Direction: ⬆️ Bottom to top

• When to use it: You want the last item to appear at the top

• Example: Chat messages growing upward (like Slack or Discord)

🧠 Visual summary:

Let me know if you want examples of how these interact with alignItems or justifyContent for layout fine-tuning!

Yes — great intuition!

✅ em is a relative font size unit, and it scales based on the font size of the parent element.

🔍 What does 0.5em mean?

• It means: "Half the font size of the parent."

• So if the parent element has font-size: 16px, then 0.5em = 8px.

💡 Why this matters for you:

In your subtitle overlay:

• If the Chinese subtitle line (the parent) has a certain font size — say, 1em or 16px —

• Then 0.5em on the translation will make it half as large, proportionally.

This is helpful because:

• ✅ It keeps the translation visually subordinate (less prominent).

• ✅ It adjusts automatically if you later change the global font size (e.g. scaling for different screen sizes or Plex zoom levels).

🔁 Comparison to other units:

🔧 Example:

If the <body> has font-size: 18px, and your wrapper doesn’t override it:

• mainLine inherits 18px

• translation with 0.5em = 9px

Let me know if you’d like to change to rem for more consistency across devices — or control the font size dynamically from your control panel!

Absolutely! whiteSpace is one of those underrated CSS properties that can really affect how your text behaves — especially when you're dealing with wrapping, spacing, and overflow.

✅ whiteSpace: "normal" — What it does:

• Allows text to wrap automatically at spaces or punctuation.

• Collapses multiple spaces into a single space.

• Default behavior for most text blocks (like paragraphs in a browser).

So when you use:

js
CopyEdit
translation.style.whiteSpace = "normal";

…it means:

"Let this text behave like a regular paragraph — wrap when needed, and don’t show extra spaces."

🔁 Other common whiteSpace values and what they do:

🧪 Examples:

normal (you’re using this):

text
CopyEdit
This is a sentence
that will wrap to
a new line if needed.

nowrap: